<template>
  <div v-if="isPipeBrustShow" class="componentContainer" v-drag>
    <el-dialog
      title="爆管分析"
      :modal="false"
      :visible.sync="isPipeBrustShow"
      :close-on-click-modal="false"
      class="dialog-content"
    >
      <template #title>
        <div
          class="custom-header drag-handle"
          style="font-size: 1rem; display: flex"
        >
          <div
            class="bar"
            style="
              width: 5px;
              height: 20px;
              background-color: white;
              margin-right: 10px;
            "
          ></div>
          <span>爆管分析</span>
        </div>
      </template>

      <el-tabs type="border-card" style="margin-top: -20px">
        <el-tab-pane label="基本操作"><PipelineBrustBasic /></el-tab-pane>
        <el-tab-pane label="详情清单"><PipelineBrustDetail /></el-tab-pane>
        <el-tab-pane label="历史方案"><PipelineBrustHistory /></el-tab-pane>
        <el-tab-pane label="停水方案"><PipelineBrustStop /></el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import PipelineBrustBasic from "./PipelineBrust-basic.vue";
import PipelineBrustDetail from "./PipelineBrust-detail.vue";
import PipelineBrustHistory from "./PipelineBrust-history.vue";
import PipelineBrustStop from "./PipelineVrust-stop.vue";
import dmgis from "@/api/dmgis";
import { transform, useGeographic, Projection, addProjection } from "ol/proj";
export default {
  components: {
    PipelineBrustBasic,
    PipelineBrustDetail,
    PipelineBrustHistory,
    PipelineBrustStop,
  },
  data() {
    return {
      isPipeBrustShow: this.dialogVisible, // 初始化为从父组件传来的值
      TapMap: null,
      dmPipProjectLayer: null,
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {
    this.TapMap = this.$store.getters.Map;
    //加服务
    let projection_szbj54 = new Projection({
      code: "sz2000",
      units: "m",
    });
    //加瓦片
    // this.TapMap.layer.getTileMapByUrl(
    //   "/data/pipeline8transtile",
    //   "pipeline8transtile",
    //   // [46101.32565, 28025.4831, 59010.10055, 40934.258],
    //   [315122.166, 655890.663, 315569.417, 656337.914],
    //   1
    // );
    // this.TapMap.map.getView().animate({
    //   center: [315394.81253, 656064.9608],
    //   zoom: 18,
    //   rotate: 0,
    //   duration: 800,
    // });
    // this.TapMap.panTo([315394.81253, 656064.9608]);
  },

  watch: {
    // 当父组件的 dialogVisible 变化时，更新 isPipeBrustShow
    dialogVisible(newVal) {
      this.isPipeBrustShow = newVal;
    },
  },
  destroyed() {
    let mapcontanier = document.querySelector(".ol-viewport");
    mapcontanier.style.cursor = "auto";
    if (this.TapMap) {
      this.TapMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (
            layer.get("layerName") == "施工点图层" ||
            layer.get("layerName") == "pipeline8transtile"
          ) {
            layer.getSource().clear();
          }
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.componentContainer {
  position: absolute;
  width: 50rem;
  height: 100vh;
  top: 2vh;
  left: -12vw;
  pointer-events: none;
}
.dialog-content {
  position: absolute !important;
  pointer-events: none !important;
  width: 30vw;
}
::v-deep .el-dialog {
  background-color: #285383;
  width: 100%;
  // margin-top: 2vh !important;
  margin: 0 !important;
  .el-dialog__header {
    pointer-events: auto;
  }
  .el-dialog__body {
    pointer-events: auto;
  }
  .el-dialog__title {
    color: white;
  }
  .el-tabs--border-card {
    background-color: #285383;
    border: none;
  }
  .el-tabs__nav-scroll {
    overflow: hidden;
    background-color: #4070a2;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    color: white;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background-color: #409eff;
  }
  .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: white;
  }
  .el-dialog__body {
    color: white;
  }
}
</style>
